﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Customize DataValidator</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    
    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), {sheetCount: 2});
            initSpread(spread);
        });

        function initSpread(spread) {
            var sheet = spread.getSheet(0);
            spread.highlightInvalidData(true);

            var validatorTypes = "DateValidator";

            $("#validatorTab2").hide();
            $("#validatorTab3").hide();
            $("#isIntTab").hide();

            $("#validatorTypes").change(function () {
                validatorTypes = $(this).val();
                switch (validatorTypes) {
                    case "DateValidator":
                        $("#validatorTab1").show();
                        $("#isTimeTab").show();
                        $("#isIntTab").hide();
                        $("#validatorTab2").hide();
                        $("#validatorTab3").hide();
                        break;
                    case "ListValidator":
                        $("#validatorTab3").show();
                        $("#validatorTab2").hide();
                        $("#validatorTab1").hide();
                        break;
                    case "FormulaListValidator":
                    case "FormulaValidator":
                        $("#validatorTab2").show();
                        $("#validatorTab1").hide();
                        $("#validatorTab3").hide();
                        break;
                    case "NumberValidator":
                        $("#validatorTab1").show();
                        $("#isTimeTab").hide();
                        $("#isIntTab").show();
                        $("#validatorTab2").hide();
                        $("#validatorTab3").hide();
                        break;
                    case "TextLengthValidator":
                        $("#validatorTab1").show();
                        $("#isTimeTab").hide();
                        $("#isIntTab").hide();
                        $("#validatorTab2").hide();
                        $("#validatorTab3").hide();
                        break;
                }
            });

            $("#btnSetValidator").click(function () {
                var gcdv = spreadNS.DefaultDataValidator;
                var ddv = null;
                var v1 = $("#txtValidatorValue1").val();
                var v2 = $("#txtValidatorValue2").val();
                switch (validatorTypes) {
                    case "DateValidator":
                        if ($("#chkIsTime").prop("checked")) {
                            ddv = gcdv.createDateValidator(parseInt($("#validatorComparisonOperator").val()),
                                    isNaN(v1) ? v1 : new Date(v1),
                                    isNaN(v2) ? v2 : new Date(v2),
                                    true);
                        } else {
                            ddv = gcdv.createDateValidator(parseInt($("#validatorComparisonOperator").val()),
                                    isNaN(v1) ? v1 : new Date(v1),
                                    isNaN(v2) ? v2 : new Date(v2),
                                    false);
                        }
                        break;
                    case "FormulaListValidator":
                        ddv = gcdv.createFormulaListValidator($("#txtValidatorValue").val());
                        break;
                    case "FormulaValidator":
                        ddv = gcdv.createFormulaValidator($("#txtValidatorValue").val());
                        break;
                    case "ListValidator":
                        ddv = gcdv.createListValidator($("#txtListValidatorValue").val());
                        ddv.inCellDropdown = $("#ckbIncellDropDown").prop("checked");
                        break;
                    case "NumberValidator":
                        if ($("#chkIsInteger").prop("checked")) {
                            ddv = gcdv.createNumberValidator(parseInt($("#validatorComparisonOperator").val()),
                                    isNaN(v1) ? v1 : parseInt(v1),
                                    isNaN(v2) ? v2 : parseInt(v2),
                                    true);
                        } else {
                            ddv = gcdv.createNumberValidator(parseInt($("#validatorComparisonOperator").val()),
                                    isNaN(v1) ? v1 : parseFloat(v1),
                                    isNaN(v2) ? v2 : parseFloat(v2),
                                    false);
                        }
                        break;
                    case "TextLengthValidator":
                        ddv = gcdv.createTextLengthValidator(parseInt($("#validatorComparisonOperator").val()),
                                isNaN(v1) ? v1 : parseInt(v1),
                                isNaN(v2) ? v2 : parseInt(v2));
                        break;
                }

                if (ddv != null) {
                    ddv.errorMessage = $("#txtErrorMessage").val();
                    ddv.errorStyle = parseInt($("#validatorErrorStyles").val());
                    ddv.errorTitle = $("#txtErrorTitle").val();
                    ddv.showErrorMessage = $("#chkShowError").prop("checked");
                    ddv.ignoreBlank = $("#chkValidatorIgnoreBlank").prop("checked");
                    ddv.showInputMessage = $("#ckbShowInputMessage").prop("checked");
                    ddv.inputTitle = $("#txtInputTitle").val();
                    ddv.inputMessage = $("#txtInputMessage").val();
                    var ss = $("#ss").data("spread");
                    var sheet = ss.getActiveSheet();
                    sheet.isPaintSuspended(true);
                    var sels = sheet.getSelections();
                    for (var i = 0; i < sels.length; i++) {
                        var sel = sheet._getActualRange(sels[i]);
                        for (var r = 0; r < sel.rowCount; r++) {
                            for (var c = 0; c < sel.colCount; c++) {
                                sheet.setDataValidator(sel.row + r, sel.col + c, ddv);
                                //sheet.setValue(sel.row + r, sel.col + c, ddv.errorMessage);
                                //sheet.getCell(sel.row + r, sel.col + c).backColor("#CCCCCC");
                            }
                        }
                    }

                    sheet.isPaintSuspended(false);
                }
            });

            $("#chkValidatorIgnoreBlank").change(function () {
                var ss = $("#ss").data("spread");
                var sheet = ss.getActiveSheet();
                var sels = sheet.getSelections();
                for (var i = 0; i < sels.length; i++) {
                    var sel = sheet._getActualRange(sels[i]);
                    for (var r = 0; r < sel.rowCount; r++) {
                        for (var c = 0; c < sel.colCount; c++) {
                            var dv = sheet.getDataValidator(sel.row + r, sel.col + c);
                            if (dv) {
                                dv.ignoreBlank = $(this).prop("checked");
                            }
                        }
                    }
                }
            });

            $("#chkShowError").change(function () {
                var ss = $("#ss").data("spread");
                var sheet = ss.getActiveSheet();
                var checked = $("#chkShowError").prop("checked");
                if (checked) {
                    ss.bind(spreadNS.Events.ValidationError, function (event, data) {
                        var dv = data.validator;
                        if (dv) {
                            alert(dv.errorMessage);
                        }
                    });
                } else {
                    ss.unbind(spreadNS.Events.ValidationError);
                }
            });

            $("#btnClearValidator").click(function () {
                var sheet = spread.getActiveSheet();

                var sels = sheet.getSelections();

                for (var i = 0; i < sels.length; i++) {
                    var sel = sheet._getActualRange(sels[i]);
                    for (var r = 0; r < sel.rowCount; r++) {
                        for (var c = 0; c < sel.colCount; c++) {
                            sheet.setDataValidator(sel.row + r, sel.col + c, null);
                        }
                    }
                }
            });
        }
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:340px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row">
            <select id="validatorTypes" style="display: inline-block; width: 150px;">
                <option value="DateValidator" selected>DateValidator</option>
                <option value="FormulaListValidator">FormulaListValidator</option>
                <option value="FormulaValidator">FormulaValidator</option>
                <option value="ListValidator">ListValidator</option>
                <option value="NumberValidator">NumberValidator</option>
                <option value="TextLengthValidator">TextLengthValidator</option>
            </select>
            <input id="btnSetValidator" type="button" value="Set Validator" />
            <input id="btnClearValidator" type="button" value="Clear Validator" />
        </div>
        <div id="validatorTab1">
            <div class="option-row">
                <select id="validatorComparisonOperator" style="width: 150px">
                    <option value="6" selected>Between</option>
                    <option value="7">NotBetween</option>
                    <option value="0">EqualTo</option>
                    <option value="1">NotEqualTo</option>
                    <option value="2">GreaterThan</option>
                    <option value="4">LessThan</option>
                    <option value="3">GreaterThanOrEqualTo</option>
                    <option value="5">LessThanOrEqualTo</option>
                </select>
                <input id="txtValidatorValue1" type="text" placeholder="Value1" style="display: inline-block;width: 80px;"/>
                <input id="txtValidatorValue2" type="text" placeholder="Value2" style="display: inline-block;width: 80px;"/>
            </div>
            <div class="option-row" id="isTimeTab">
                <input id="chkIsTime" type="checkbox"/><label for="chkIsTime">Is Time</label>
            </div>
            <div class="option-row" id="isIntTab">
                <input id="chkIsInteger" type="checkbox"/><label for="chkIsInteger">Is Integer</label>
            </div>
        </div>
        <div class="option-row" id="validatorTab2">
            <input type="text" id="txtValidatorValue" placeholder="Value1" />
        </div>
        <div class="option-row" id="validatorTab3">
            <input type="text" id="txtListValidatorValue" placeholder="(eg:1,2,3,4,5)" />
            <input type="checkbox" id="ckbIncellDropDown" checked="checked" />
            <label for="ckbIncellDropDown">Show In-Cell DropDown</label>
        </div>
        <div class="option-row">
            <input type="checkbox" checked="checked" id="ckbShowInputMessage" />
            <label for="ckbShowInputMessage">Show InputMessage</label>
        </div>
        <div class="option-row">
            <label>Title:</label>
            <input type="text" id="txtInputTitle" placeholder="Title" style="display: inline-block;width: 100px;"/>
            <label>Input Message:</label>
            <input type="text" id="txtInputMessage" placeholder="Input Message" style="display: inline-block;width: 100px;"/>
        </div>
        <div class="option-row">
            <input id="chkShowError" type="checkbox" />
            <label for="chkShowError">ShowErrorMessage</label>
            <input id="chkValidatorIgnoreBlank" type="checkbox" />
            <label for="chkValidatorIgnoreBlank">IgnoreBlank</label>
        </div>
        <div class="option-row">
            <input id="txtErrorTitle" type="text" placeholder="ErrorTitle" style="display: inline-block;width: 80px;"/>
            <input id="txtErrorMessage" type="text" placeholder="ErrorMessage" style="display: inline-block;width: 80px;"/>
            <select id="validatorErrorStyles">
                <option value="0" selected>Stop</option>
                <option value="1">Warning</option>
                <option value="2">Information</option>
            </select>
        </div>
    </div>
</div>
</body>
</html>
